<!-- components/CheckResultTable.vue -->
<template>
  <view class="table-container">
    <uni-table 
      :border="border"
      :stripe="stripe"
      :class="['check-result-table', customClass]"
    >
      <!-- 表头 -->
      <uni-tr>
        <uni-th 
          v-for="(col, index) in visibleColumns"
          :key="`header_${index}`"
          :align="col.align || 'center'"
          :class="['header-cell', col.headerClass]"
        >
          {{ col.title }}
        </uni-th>
      </uni-tr>

      <!-- 表格内容 -->
      <uni-tr 
        v-for="(row, rowIndex) in tableData"
        :key="`row_${rowIndex}`"
        @click="handleRowClick(row)"
      >
        <uni-td 
          v-for="(col, colIndex) in visibleColumns"
          :key="`cell_${rowIndex}_${colIndex}`"
          :align="col.align || 'center'"
          :class="['body-cell', col.bodyClass]"
        >
          <!-- 插槽处理 -->
          <slot v-if="col.slot" :name="col.slot" :row="row" :index="rowIndex"/>
          <template v-else>
            <!-- 标签类型处理 -->
            <uni-tag 
              v-if="col.type === 'tag'"
              :text="row[col.key] | resultFilter"
              :type="getTagType(row[col.key])"
              class="result-tag"
            />
            <!-- 常规数据展示 -->
            <template v-else>
              {{ col.formatter ? col.formatter(row) : row[col.key] }}
            </template>
          </template>
        </uni-td>
      </uni-tr>
    </uni-table>
  </view>
</template>

<script>
export default {
  name: 'CheckResultTable',
  props: {
    // 列配置
    columns: {
      type: Array,
      default: () => [
        { 
          title: '食品类别', 
          key: 'foodCategory',
          align: 'center',
          mobileHidden: true
        },
        { 
          title: '类别名称', 
          key: 'categoryName',
          align: 'left'
        },
        { 
          title: '总分', 
          key: 'projectNameScore',
          width: 90
        },
        { 
          title: '实际得分', 
          key: 'actualScore',
          width: 90
        },
        { 
          title: '核查得分率', 
          key: 'scoringRate',
          mobileHidden: true
        },
        { 
          title: '单项0分项目', 
          key: 'scoreIsZero',
          mobileHidden: true
        },
        { 
          title: '核查结论', 
          key: 'checkResult',
          type: 'tag',
          width: 100
        }
      ]
    },
    // 表格数据
    tableData: {
      type: Array,
      required: true,
      default: () => []
    },
    // 是否显示斑马纹
    stripe: {
      type: Boolean,
      default: true
    },
    // 是否显示边框
    border: {
      type: Boolean,
      default: true
    },
    // 自定义类名
    customClass: {
      type: String,
      default: ''
    }
  },
  computed: {
    // 可见列计算（移动端隐藏部分列）
    visibleColumns() {
      return this.columns.filter(col => {
        if (this.$isMobile && col.mobileHidden) return false
        return true
      })
    }
  },
  methods: {
    // 获取标签类型
    getTagType(value) {
      return value === '1' ? 'success' : 'error'
    },
    // 行点击事件
    handleRowClick(row) {
      this.$emit('row-click', row)
    }
  },
  filters: {
    // 结果过滤器
    resultFilter(value) {
      const map = { '1': '符合', '2': '不符合' }
      return map[value] || '未检查'
    }
  }
}
</script>

<style lang="less" scoped>
.table-container {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  
  .check-result-table {
    min-width: 600px;
    font-size: 14px;
    border-collapse: collapse;

    .header-cell {
      background: #f8f9fa;
      font-weight: 600;
      padding: 12px 8px;
      white-space: nowrap;
      min-width: 80px;
    }

    .body-cell {
      padding: 10px 8px;
      line-height: 1.5;
      word-break: break-word;
      min-width: 80px;

      .result-tag {
        display: inline-flex;
        padding: 4px 8px;
        font-size: 12px;
      }
    }

    @media (max-width: 768px) {
      font-size: 12px;

      .header-cell,
      .body-cell {
        padding: 8px 4px;
        min-width: 70px;
      }
    }

    @media (max-width: 480px) {
      .header-cell,
      .body-cell {
        padding: 6px 2px;
        min-width: 60px;
      }
    }
  }
}
</style>